<template>
    <div class="order">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="不凡"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <!-- 顶部小条条 -->
        <div class="line">
        </div>
        <!-- 收货地址 -->
        <div class="address" @click="toAddress">
            <div class="left">
                <div class="left-top">
                    {{currentAddress.name + ' ' + currentAddress.mobile}}
                </div>
                <div class="left-bottom">
                    {{currentAddress.address + ' ' + currentAddress.address_detail}}
                </div>
            </div>
            <div class="right"></div>
        </div>
        <!-- 价格优惠卷等 -->
        <div class="info">
            <van-cell title="商品合计" :value="'￥' + cardCount/100" />
            <van-cell title="运费" value="免运费" />
            <van-cell title="优惠卷" value="暂无" />
        </div>
        <div class="goods">
            <van-card
                :num="item.number"
                :price="item.retail_price + '.00'"
                :title="item.goods_name"
                :thumb="item.list_pic_url"
                v-for="(item, index) in list"
                :key="index"
            />
        </div>
        <!-- 操作栏 -->
        <van-submit-bar
            :price="cardCount"
            button-text="结算"
            @submit="onSubmit"
        >
        </van-submit-bar>
    </div>
</template>

<script>
import { getAddressListInfo, addressInfo } from '@/api/my/address/index'
import { Toast } from 'vant';
import { mapState } from 'vuex'
    export default {
        data () {
            return {
                openId: localStorage.getItem('openId'),
                currentAddress: {}
            }
        },
        computed: {
            ...mapState({
                cardCount: state => state.cardCount,
                orderList: state => state.orderList,
            }),
            // 已经选择要结算的商品
            list() {
                return this.orderList.filter(el => {
                    return el.isChecked == true
                })
            },
        },
        methods: {
            // 提交
            onSubmit() {
                Toast('你好')
            },
            // 返回
            onClickLeft() {
                this.$router.push({ name: 'cart' })
            },
            // 跳转到地址选择
            toAddress() {
                this.$router.push({ name: 'address', query: { id: this.currentAddress.id } })
            }
        },
        created() {
            // 当前地址
            if (this.$route.query.id) {
                // 如果传来了id，说明选择了新地址
                addressInfo({ id: this.$route.query.id })
                .then(res => {
                    this.currentAddress = res.data
                })
            } else {
                // 如果没有传值id，那么久默认地址
                getAddressListInfo({ openId: this.openId })
                .then(res => {
                    this.currentAddress = res.data.find(el => el.is_default == 1)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .order{
        width: 100%;
        background: #f4f4f4;
        margin-bottom: 50px;
        .header{
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9;
        }
        .line{
            margin-top: 1.226667rem;
            background: url(../../../assets/img/address-bg-bd.png) repeat-x;
            height: 7px;
        }
        .address{
            background: #fff;
            display: flex;
            padding: 0.4rem;
            justify-content: space-between;
            align-items: center;
            .left{
                width: 60%;
                margin-left: 20px;
                .left-top{
                    margin-bottom: 0.213333rem;
                    font-size: 0.426667rem;
                }
                .left-bottom{
                    font-size: 0.346667rem;
                }
            }
            .right{
                height: 30px;
                width: 30px;
                background: url(../../../assets/img/address_right.png);
                background-size: 100%;
            }
        }
        .info{
            margin-top: 10px;
            .van-cell{
                font-size: 12px;
                .van-cell__value{
                    color: #000;
                }
            }
        }
        .goods{
            margin-top: 10px;
            padding-bottom: 10px;
            background: #f4f4f4;
            .van-card{
                background: #fff;
                .van-card__content{
                    padding: 10px 0;
                    box-sizing: border-box;
                    .van-card__title{
                        font-size: 15px;
                    }
                }

            }
            .van-card:not(:first-child){
                margin-top: 2px;
            }
        }
    }
</style>
